<template>
  <!-- #ifdef MP-WEIXIN -->
  <uv-navbar
    :fixed="false"
    :title="title"
    left-arrow
    @leftClick="$onClickLeft"
  />
  <!-- #endif -->
  <view>
    <view style="margin-top: 350rpx" v-if="list.length == 0">
      <uv-empty :text="currentLanguageTexts.noData"></uv-empty>
    </view>

    <view class="" v-for="(item, i) in list" :key="i">
      <view class="card">
        <view class="card_item flex justify-between">
          <view class="left">
            <view class="top">{{
              currentLanguageTexts.Bankcardwithdrawal
            }}</view>
            <view class="bom"
              >{{ currentLanguageTexts.Withdrawal }}：{{
                formatDateTime(item.createTime)
              }}</view
            >
          </view>
          <view class="right">
            <view class="top">
              {{ item.amount }}{{ currentLanguageTexts.yuan }}
            </view>
            <view class="bom" v-if="item.status == 0">
              {{ currentLanguageTexts.Unaudited }}
            </view>
            <view class="bom" v-if="item.status == 1">
              {{ currentLanguageTexts.Untilreceived }}
            </view>
            <view class="bom" v-if="item.status == 2">
              {{ currentLanguageTexts.ReviewRejected }}
            </view>
            <view class="bom" v-if="item.status == 3">
              {{ currentLanguageTexts.Alreadyreceived }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { withdrawals } from '@/api/merchant';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { useMainStore } from '@/store/store';
import { storeToRefs } from 'pinia';
import { formatDateTime } from '@/utils/util';
const main = useMainStore();
const { merchartShop, currentLanguageTexts } = storeToRefs(main);
const title = ref(currentLanguageTexts.value.Withdrawaldetails);
const list = ref([]);
const page = ref(1);
const pageSize = ref(10);

onLoad(() => {
  getList();
});

onReachBottom(() => {
  page.value++;
  getList();
});

const getList = async () => {
  let res = await withdrawals({
    shopId: merchartShop.value.id,
    pageNo: page.value,
  });
  if (res) {
    list.value = [...list.value, ...res];
  }
};
</script>

<style lang="scss">
.card {
  background-color: #fff;
  padding: 0 40rpx;
  box-sizing: border-box;

  .card_item {
    padding: 25rpx 0;
    box-sizing: border-box;
    border-bottom: 1rpx solid #ebebeb;

    .left {
      .top {
        font-size: 26rpx;
        font-weight: 600;
        color: #333333;
        margin-bottom: 20rpx;
      }

      .bom {
        font-size: 24rpx;
        color: #777777;
      }
    }

    .right {
      .top {
        font-size: 38rpx;
        font-weight: 600;
        color: #f56c6c;
        margin-bottom: 10rpx;
      }

      .bom {
        font-size: 24rpx;
        color: #777777;
        text-align: right;
      }
    }
  }
}
</style>
